<template>
<div class="home self-background">
    <div class="home-header">
        <span v-if="!oldProjectData.length">欢迎来到机器学习平台 —「星垣」</span>
        <el-select v-else @change="handleSelect" v-model="currentProject.projectName">
            <el-input ref="selectInInput" class="home-select-in-input" v-model="searchVal" placeholder="搜索"></el-input>
            <el-option :class="{'home-project-select-option':currentOption===i}" @click.native="currentOption=i" v-for="(item, i) in projectData" :key="i" :label="item.projectName" :value="item.projectId"></el-option>
            <div class="select-project-empty" slot="empty">
                <el-input ref="selectEmptyInput" class="home-select-in-input" v-model="searchVal" placeholder="搜索"></el-input>
                <span>无数据</span>
            </div>
        </el-select>
    </div>
    <div class="home-main">
        <div class="home-left">
            <el-card class="exp-count" shadow="hover">
                <div slot="header" class="clearfix">
                    <span><i class="iconfont icon-shouye-xiangmu"></i>项目概览</span>
                    <div class="time-tab">
                        <el-select v-if="projectData.length" @change="handleSelectTimeType" v-model="projectSelectTime">
                            <el-option :label="'最近一个月'" :value="1"></el-option>
                            <el-option :label="'最近3个月'" :value="3"></el-option>
                            <el-option :label="'最近半年'" :value="5"></el-option>
                            <el-option :label="'今年'" :value="2"></el-option>
                            <el-option :label="'选择时间范围'" :value="0"></el-option>
                        </el-select>
                        <el-date-picker v-if="projectSelectTime === 0" v-model="time" type="daterange" @change="handleSelectDiyTime" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <data-list-line :projectLineData="projectLineData" :hasProject="!projectData.length"></data-list-line>
            </el-card>
            <div class="echarts-list">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span><i class="iconfont icon-shouye-shuju"></i>数据</span>
                    </div>
                    <data-pie :tableData="tableData"></data-pie>
                </el-card>
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span><i class="iconfont icon-shouye-moban"></i>模型</span>
                    </div>
                    <model-pie :modelData="modelData"></model-pie>
                </el-card>
            </div>
        </div>
        <div class="home-right">
            <el-card shadow="hover">
                <div slot="header" class="clearfix">
                    <span><i class="iconfont icon-shouye-zuijinshiyan"></i>最近实验</span>
                </div>
                <div v-if="experimentData.length" class="project-box" :style="experimentData.length>=10?'justify-content:space-around':''">
                    <div class="project" v-for="(item, i) in experimentData" :key="i">
                        <div class="project-item">
                            <span @click="handleToExp(item.experimentId)">
                                <i class="iconfont icon-shiyanguanli"></i>
                                <el-tooltip effect="dark" :content="item.experimentName" placement="top">
                                    <span>{{item.experimentName}}</span>
                                </el-tooltip>
                            </span>
                            <span class="project-item-span">{{item.realName}}</span>
                        </div>
                        <span>{{item.lastOperTime}}</span>
                    </div>
                </div>
                <no-data v-else :isExpImg="true">
                    <span style="color: rgba(51, 51, 51, .45)">暂无最近实验~</span>
                </no-data>
            </el-card>
        </div>
    </div>
</div>
</template>

<script>
import moment from 'moment'
import NoData from '../../components/NoData'
import ModelPie from './ModelPie'
import DataListLine from './DataListLine'
import DataPie from './DataPie'
export default {
    name: 'Home',
    data () {
        return {
            currentProject: {
                projectId: '',
                projectName: ''
            },
            time: [],
            searchVal: '',
            projectSelectTime: 1,
            user: JSON.parse(localStorage.getItem('USER')),
            projectData: [],
            experimentData: [],
            modelData: {
                vchartData: [],
                modelNum: 0
            },
            tableData: {
                dataNum: 0
            },
            projectLineData: [],
            oldProjectData: [],
            currentOption: 0
        }
    },
    components: {
        DataListLine,
        DataPie,
        ModelPie,
        NoData
    },
    mounted () {
        this.checkIsFirstLogin(this.user.lastLoginTime)
        this.init()
        this.handleSelectTimeType(1)
    },
    methods: {
        init () {
            const params = {
                keyword: '',
                pageSize: 10,
                pageNum: -1
            }
            this.$post('/project/list', params).then(res => {
                if (res) {
                    this.projectData = res.rows
                    this.oldProjectData = res.rows
                    if (res.rows.length) {
                        this.currentProject = {
                            projectName: res.rows[0].projectName,
                            projectId: res.rows[0].projectId
                        }
                        this.handleSelect()
                    }
                }
            }).finally(() => {
                this.projectData.loading = false
            })
        },
        handleSelectDiyTime (val) {
            this.time = [moment(val[0]).format('YYYY-MM-DD 00:00:00'), moment(val[1]).format('YYYY-MM-DD 23:59:59')]
            this.handleSelect()
        },
        handleSelectTimeType (val) {
            if (val !== 0) {
                let startTime = val === 2 ? moment().year(moment().year()).startOf('year').valueOf() : moment().subtract(val, 'months').format('YYYY-MM-DD HH:mm:ss')
                this.time = [startTime, moment().format('YYYY-MM-DD HH:mm:ss')]
                this.handleSelect()
            }
        },
        handleSelect (val) {
            this.searchVal = ''
            if (val) {
                this.currentProject.projectId = val
            }
            for (let i = 0; i < this.projectData.length; i++) {
                if (this.projectData[i].projectId === val) {
                    this.currentProject.projectName = this.projectData[i].projectName
                }
            }
            if (!this.projectData.length) {
                return
            }
            const params = {
                projectId: val || this.currentProject.projectId,
                startTime: this.time[0] && moment(this.time[0]).format('YYYY-MM-DD HH:mm:ss'),
                endTime: this.time[1] && moment(this.time[1]).format('YYYY-MM-DD HH:mm:ss')
            }
            localStorage.setItem('projectId', params.projectId)
            this.$post('/home/report', params).then(res => {
                if (res) {
                    this.experimentData = res.latelyExperiments
                    this.projectLineData = res.dates.map((item, i) => {
                        return { '日期': item.date, '实验': res.projectSummary[i].experimentTotal, '数据': res.projectSummary[i].tableTotal, '模型': res.projectSummary[i].modelTotal }
                    })
                    // this.projectLineData = []
                    this.modelData = res.model
                    this.modelData.vchartData = res.model.modeName.map((item, i) => {
                        return { '数值': this.modelData.modeValue[i], '名称': item }
                    })
                    this.tableData = res.table
                    this.tableData.dataNum = this.tableData.staticTotal + this.tableData.tempTotal
                    var result = 0
                    this.modelData.modeValue.map(v => {
                        result += v
                        return result
                    })
                    this.modelData.modelNum = result
                }
            })
        },
        handleToExp (experimentId) {
            localStorage.setItem('toExpId', experimentId)
            window.open(`${location.origin}/exp/index.html`)
        },
        checkIsFirstLogin (lastLoginTime) {
            setTimeout(() => {
                lastLoginTime === null && !localStorage.getItem('isShowFirstMsg') && this.$message.warning('首次登录请修改登录密码') && localStorage.setItem('isShowFirstMsg', 1)
            }, 2000)
        }
    },
    watch: {
        searchVal (val, oldVal) {
            this.projectData = this.oldProjectData.filter(v => {
                return v.projectName.includes(val)
            })
            this.$nextTick(() => {
                if (!this.projectData.length) {
                    this.$refs.selectEmptyInput.focus()
                } else {
                    this.$refs.selectInInput.focus()
                }
            })
        }
    }
}
</script>

<style lang="less">
.home-project-select-option {
    color: #2680EB;
    font-weight: 700;
}
.select-project-empty {
    padding: 6px;
    text-align: center;
    span {
        display: flex;
        padding: 6px;
        color: #999;
        font-size: 14px;
    }
}
.home-select-in-input {
    width: calc(100% - 40px);
    margin: 0 20px;
    margin-bottom: 6px;
}
.home {
    padding-bottom: 50px;
    font-family: 'PingFangSC-Regular';
    height: 100%;
    .el-card__header {
        padding: 8px 20px;
        min-height: 60px;
        display: flex;
        align-items: center;
        i {
            margin-right: 8px;
            color: #2680EB;
        }
    }
    .el-card {
        border: 0;
    }
    .el-card__body {
        padding: 10px;
    }
    .home-header {
        background-color: transparent;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url('../../assets/img/home-top.png') no-repeat;
        background-position: center top;
        background-size: 100% 100%;
        margin-bottom: 10px;
        .el-select {
            width: 33%;
            transform: translateY(-6px);
            &:hover {
                background: #e4e4e4;
            }
            border-radius: 4px;
        }
        .el-input__inner {
            height: 35px;
            min-width: 300px;
            border: 0;
            text-align: center;
            background: transparent;
            font-size: 21px;
        }
    }
    .home-main {
        display: flex;
        width: 100%;
        height: calc(100% - 60px);
    }
    .home-left {
        width: 65%;
        margin-right: 16px;
        .exp-count {
            margin-bottom: 16px;
            .clearfix {
                font-size: 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
            }
            .time-tab {
                display: flex;
                margin-left: 10px;
                .el-select {
                    margin-right: 10px;
                }
            }
            .el-card__body {
                width: 100%;
            }
        }
        .echarts-list {
            display: flex;
            padding-bottom: 16px;
            .clearfix {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;
                i {
                    font-size: 16px;
                    margin-right: 8px;
                }
                .icon-moxing-zxw {
                    font-size: 23px;
                }
            }
            .el-card {
                width: calc(50% - 8px);
                .el-card__body {
                    width: 100%;
                    padding-bottom: 40px;
                }
            }
            .el-card:last-child {
                margin-left: 16px;
            }
        }
    }
    .home-right {
        width: calc(35% - 16px);
        .el-card {
            margin-bottom: 16px;
            .el-card__header {
                // padding: 10px 20px 8px 0;
                .clearfix {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 16px;
                }
            }
            .el-card__body {
                .project-box {
                    display: flex;
                    flex-direction: column;
                    height: 100%;
                    width: 100%;
                    .project {
                        display: flex;
                        flex-direction: column;
                        border-bottom: 1px solid rgba(151, 151, 151, .5);
                        font-size: 14px;
                        min-height: 55px;
                        padding: 17px 26px 16px 16px;
                        .project-item {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #2680EB;
                            margin-bottom: 8px;
                            span:first-child {
                                width: 80%;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                            }
                            span:last-child {
                                width: 20%;
                                text-align: right;
                            }
                            i {
                                color: #2680EB;
                                display: inline-block;
                                line-height: 20px;
                                text-align: center;
                                border-radius: 100%;
                                font-size: 12px;
                                margin-right: 5px;
                                width: 20px;
                                height: 20px;
                                background: url('../../assets/img/home-exp-list.png') center no-repeat;
                            }
                            span:first-child {
                                cursor: pointer;
                            }
                            .project-item-span {
                                color: rgba(51, 51, 51, .85) !important;
                            }
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                        & > span {
                            margin-left: 30px;
                            color: rgba(51, 51, 51, .45);
                        }
                    }
                }
            }
        }
    }
}
</style>
